/* eslint-disable react/prop-types */
import React from 'react';
import { Field, reduxForm } from 'redux-form';
import {
  FormGroup, ControlLabel, FormControl,
  Button, ButtonToolbar, Radio, Checkbox
} from 'react-bootstrap';

const renderInput = ({ input, label, type }) => {

  console.log('src/components/ReduxForms/SimpleForm.js ->renderInput', { input, label, type });
  return ( <FormGroup controlId={input.name}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl {...input} placeholder={label} type={type}/>
  </FormGroup>
)};

const renderRadio = ({ input, label }) => {
  console.log('src/components/ReduxForms/SimpleForm.js ->renderRadio', { input, label});
  return (
    <Radio inline {...input} >{label}</Radio>
);
};

const renderCheckbox = ({ input, label }) => {

  console.log('src/components/ReduxForms/SimpleForm.js ->renderCheckbox', { input, label});
  return (
  <FormGroup>
    <Checkbox inline {...input}>{label}</Checkbox>
  </FormGroup>
);
};

const renderSelect = ({ input, label, children }) => {

  console.log('src/components/ReduxForms/SimpleForm.js ->renderSelect', { input, label});

  return (
  <FormGroup controlId={input.name}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl
      componentClass="select"
      {...input}
    >
      {children}
    </FormControl>
  </FormGroup>
);
};

const renderTextarea = ({ input, label }) => {

  console.log('src/components/ReduxForms/SimpleForm.js ->renderTextarea', { input, label});

  return (
  <FormGroup controlId={input.name}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl
      componentClass="textarea"
      placeholder={label}
      {...input}
    />
  </FormGroup>
);
};


const SimpleForm = (props) => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field name="firstName" component={renderInput} type="text" label="First Name"/>
      <Field name="lastName" component={renderInput} type="text" label="Last Name"/>
      <Field name="email" component={renderInput} type="email" label="Email"/>
      <FormGroup>
        <Field name="sex" component={renderRadio} type="radio" value="male" label="Male"/>
        <Field name="sex" component={renderRadio} type="radio" value="female" label="Female"/>
      </FormGroup>

      <Field name="favoriteColor" component={renderSelect} label="Favorite Color">
        <option></option>
        <option value="ff0000">Red</option>
        <option value="00ff00">Green</option>
        <option value="0000ff">Blue</option>
      </Field>

      <Field name="employed" component={renderCheckbox} type="checkbox" label="Employed"/>

      <Field name="notes" component={renderTextarea} type="textarea" label="Notes"/>

      <ButtonToolbar>
        <Button type="submit" bsStyle="primary" disabled={pristine || submitting}>
          {submitting ? <i /> : <i />} Submit
        </Button>
        <Button disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </Button>
      </ButtonToolbar>
    </form>
  );
};

// 装饰器reduxForm使用组件作为参数，最终生成了一个新的组件。
export default reduxForm({
  form: 'simple'  // a unique identifier for this form
})(SimpleForm);




// reduxForm 是如何 与 表单关联呢?
// 1．表单层面：
//    redux-form 提供的 reduxForm 装饰器 为表单组件提供了 handleSubmit、pristine、reset、submitting 等props，
//    分别用于提交表单、判断表单数据是否改动、重置表单、显示正在提交这些功能。
// 2. 字段层面：
//    redux-form 派遣了 Field 等组件作为“信使”来与表单字段关联。
//    Field 组件不仅提供了一个 component 属性可以接受一个 React 组件来自定义样式，
//    而且还会给里面的表单字段传递input（包含value、onChange、onBlur、onFocus等）、label、type等props用于监听该表单字段的变化。



// 上述代码首先使用 reduxForm 装饰器给表单传递一些props，进而控制表单的提交和清空，
// 然后使用React-Bootstrap编写了一些无状态组件（renderInput等）用于表达表单中各字段的样式，
// 并使用Field组件来关联这些字段，使得它们的value以及各种状态变化（比如onChange、onBlur、onFocus等）都能被ReduxForm监听到
